<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.min.js"></script>
    <script src="/js/util.js"></script>
    <script>
        function submitForm(){
            //创建上传文件表单对象
            var formObj = new FormData();
            //添加普通表单
            formObj.append("userName",$("userName").value);
            //添加上传文件表单
            formObj.append("face",$("faceFile").files[0]);

            //设置请求头，说明请求消息体中内容类型
            let config = {
                headers: {'Content-Type': 'multipart/form-data' }
            }
            //第一个参数为请求的URL路径，第二个参数为表单FormData对象，
            //第三个参数为请求头对象，设置请求参数的内容类型
            axios.post("/user/add",formObj,config).then(resp =>{
                alert(resp.data);
            })
        }
    </script>
</head>
<body>
        姓名：<input type="text" id="userName"><br>
        <img src="" id="faceImg" width="300" height="300"><br>
        头像：<input type="file" id="faceFile"><br>
        <input type="button" value="提交" onclick="submitForm()">
</body>
</html>